<template>
  <div class="comment-container">
    <div class="author-message">
      <img src="../../../assets/images/avatar.jpg" alt="" />
      <span class="author-name">{{ commentMessage.replyName }}</span>
      <span class="time">{{ commentMessage.comment_time }}</span>
    </div>
    <div class="detail">
      <p>{{ commentMessage.content }}</p>
    </div>
    <div class="function-area">
      <div class="like">
        <Icon type="md-thumbs-up" />
        <span class="like-number">4</span>
      </div>
      <div class="reply" @click="changeReply" :class="{ hidden: !writeReply }">
        <Icon type="ios-undo" />
        <span v-if="!writeReply">回复</span>
        <span v-else>取消回复</span>
      </div>
      <div class="look-down" :class="{ hidden: !writeReply }">
        <Icon type="ios-thumbs-down" />
        <span>踩</span>
      </div>

      <div class="inform hidden">
        <Icon type="md-flag" />
        <span>举报</span>
      </div>
    </div>
    <div class="reply-area">
      <reply-item
        v-for="(item, index) in commentMessage.replyVo"
        :key="index"
        :replyMessage="item"
      />
    </div>
    <WriteReply class="write-reply" v-if="writeReply" :message="message" />
  </div>
</template>

<script>
import WriteReply from "@/components/question/comment/WriteReply";
import ReplyItem from "@/components/question/comment/ReplyItem";

export default {
  name: "CommentItem",
  props: {
    commentMessage: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      writeReply: false,
      message: {
        answer_id: this.$parent.answerMessage.id,
        replied_id: this.commentMessage.reply_id,
        pid: this.commentMessage.id,
      },
    };
  },
  methods: {
    changeReply() {
      this.writeReply = !this.writeReply;
    },
    reGetComment() {
      this.$parent.getComments();
    },
    //回复成功后隐藏回复框
    hideReply() {
      this.$parent.writeReply = false;
    },
  },
  components: {
    WriteReply,
    ReplyItem,
  },
};
</script>

<style lang="scss" scoped>
.comment-container {
  padding: 1rem 2rem;
  border-bottom: 0.1rem solid #f6f6f6;
  .author-message {
    position: relative;
    height: 2.4rem;
    display: flex;
    align-items: center;
    img {
      height: 100%;
      margin-right: 0.8rem;
    }
    .author-name {
      font-weight: 500;
    }
    .time {
      right: 0;
      position: absolute;
      color: #8590a6;
    }
  }
  .detail {
    padding-left: 3.1rem;
    p {
      line-height: 1.6;
    }
  }
  .function-area {
    display: flex;
    align-items: center;
    padding-left: 3.1rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
    color: #8590a6;
    div {
      cursor: pointer;
      margin-right: 1.5rem;
      span {
        margin-left: 0.5rem;
      }
    }
    .hidden {
      display: none;
    }
  }
  .write-reply {
    padding-left: 3.1rem;
    width: 100%;
  }
  .reply-area {
    width: 100%;
    padding-left: 1.2rem;
  }
  &:hover .hidden {
    display: block;
  }
}
</style>